<template>
	<view :style="[{paddingTop:CustomBar+'px'}]">
		<cu-custom bgColor="bg-colorP" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">意见反馈</block>
		</cu-custom>
		<view class="suggestConView">
			<view class="choose-shopsview">
				<view class="shopscontent">
					<view class="weui-cell__bd">
						<picker @change="bindPickerChange" :value="index" :range="area" class="uni-list-cell-db">
							<view class="picker">
								<text>{{area[areaIndex]}}</text>
								<text class="lg text-gray" :class="'cuIcon-right'"></text>
							</view>
						</picker>
					</view>
				</view>
			</view>

			<view class="section section_gap">
				<view class="section_title">
					请选择您的评价(多选项)：
				</view>
				<view class="chooseItems">
					<checkbox-group class="grounp" name="checoutline: none;border: none;" @change="checkBindchange">
						<view v-for="(value, index) in arr" :key='index' class="chooseitem">
							<checkbox :value="value.id" :checked="value.checked" style="transform:scale(0.7)" class="checkboxitem" />
							<view class="complaint-name" @click="changeBox" :data-id="value.id">{{value.complaint_name}}</view>
						</view>
					</checkbox-group>
				</view>
			</view>
			<view class="suggestview">
				<view class="suggest-title">
					问题和意见
				</view>
				<textarea class=" weui-textarea" placeholder="请在这里写明您的建议或意见，我们会有专人处理" data-name='desc' bindinput='bindInput'
				 v-model="suggestDesc" placeholder-class='info-placeholder' rows="1"></textarea>
			</view>
			<view class="sexbg">性别：
				<radio-group @change="radioChange" class="radio-group-feed">
					<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
						<view>
							<radio :value="item.value" :checked="index === current" style="transform:scale(0.7)" color="#f34930" class="sexradio" />
							{{item.name}}
						</view>
					</label>
				</radio-group>
			</view>
			<view class="info-item">
				<view> 联系方式：</view>
				<input type='number' placeholder='请输入联系方式' placeholder-class='info-placeholderPhone' data-name='phone' v-model="phoneNumber"
				 bindinput='bindInput' class="phoneinput">
			</view>

			<view class="btn-shops" @click="submitSave">提交</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				carlistID: [],
				userInfo: '',
				area: ['请选择商家'],
				areaIndex: 0,
				arr: [],
				NowType: '-1',
				params: {},
				items: [{
						value: '0',
						name: '女士'
					},
					{
						value: '1',
						name: '先生'
					},
					{
						value: '2',
						name: '保密'
					},
				],
				current: 3,
			}
		},
		onLoad() {
			var userInfo = uni.getStorageSync('userInfo')
			this.getSuggestionData()
		},
		methods: {
			changeBox(e) {
				var value = e.currentTarget.dataset.id
				var arr = this.arr
				var id = ''
				arr.forEach(item => {
					if (item.id == value) {
						if (item.checked) {
							item.checked = false
						} else {
							item.checked = true
						}
					}
				})
				arr.forEach(item => {
					if (item.checked) {
						id += item.id + ','
					}
				})
				this.arr = arr
				// console.log(arr)
				this.params.title = id

				console.log(id)
			},
			getSuggestionData() {
				var that = this;
				that.area = ['请选择商家']
				that.carlistID = ['-1']
				this.$request({
					url: '/Suggestion/getBusiness',
					success: res => {
						if (res.data.status == 1) {
							for (var i = 0; i < res.data.data.shops.length; i++) {
								that.area.push(res.data.data.shops[i].name)
								that.carlistID.push(res.data.data.shops[i].business_id)
							}
							var complaintData = res.data.data.complaintData
							complaintData.forEach(item => {
								item['checked'] = false
							})
							that.arr = complaintData
							uni.hideLoading()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			radioChange(event) {
				var that = this
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === event.target.value) {
						this.current = i;
						break;
					}
				}
				that.params.sex = this.current + 1
			},
			bindPickerChange: function(e) {
				var that = this
				that.areaIndex = parseInt(e.target.value)
				that.params.business_id = that.carlistID[that.areaIndex]
				that.NowType = that.carlistID[that.areaIndex]
			},
			submitSave() {
				var that = this
				var area = ['请选择商家']
				that.params.remark = that.suggestDesc
				that.params.phone = that.phoneNumber

				if (!that.params.business_id || that.params.business_id === '' || that.params.business_id === '-1') {
					uni.showToast({
						title: '请选择要投诉与建议的商家',
						icon: 'none'
					})
					return false
				}
				if (!that.params.title || that.params.title === '') {
					uni.showToast({
						title: '请选择您的评价',
						icon: 'none'
					})
					return false
				}

				if (!that.params.remark || that.params.remark === '') {
					uni.showToast({
						title: '请写您的建议或意见',
						icon: 'none'
					})
					return false
				}

				if (!that.params.sex || that.params.sex == '') {
					uni.showToast({
						title: '请选择您的性别！',
						icon: 'none'
					})
					return false
				}

				if (!that.params.phone || that.params.phone === '') {
					uni.showToast({
						title: '请输入您的手机号码！',
						icon: 'none'
					})
					return false
				} else if (!/^[1][3|4|5|6|7|8|9][0-9]{9}$/.test(that.params.phone)) {
					uni.showToast({
						title: '手机号格式有误',
						icon: 'none'
					})
					return false
				}

				that.params.sex -= 1
				this.$request({
					url: '/Suggestion/suggest',
					data: that.params,
					success: res => {
						if (res.data.status == 1) {
							uni.showToast({
								title: res.data.message
							})
							setTimeout(function() {
								uni.navigateBack({
									delta: 1
								})
							}, 2000)
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			checkBindchange(e) {
				var that = this
				var id = "";
				for (var i = 0; i < e.detail.value.length; i++) {
					if (i == 0) {
						id = e.detail.value[i];
					} else {
						id += ("," + e.detail.value[i])
					}
				}
				var arr = this.arr
				arr.forEach(item => {
					if (e.detail.value.indexOf(String(item.id)) > -1) {
						item.checked = true
					} else {
						item.checked = false
					}

				})
				this.arr = arr
				that.params.title = id;
				console.log(id)
			},
		},


	}
</script>


<style>
	.radio-group-feed {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.radio-group-feed label {
		margin-right: 20rpx;
	}

	.radio-group-feed label>view {
		display: flex;
		align-items: center;
	}
</style>
<style scoped>
	page {
		background: #fff;
	}

	.suggestConView {
		width: 100%;
		height: 510rpx;
		position: absolute;
		box-sizing: border-box;
	}

	.choose-shopsview {
		height: 88rpx;
		background: #fff;

	}

	.shopscontent {
		font-size: 30rpx;
		line-height: 88rpx;
		padding: 0 20rpx;
		color: #333333;

	}

	.uni-list-cell-db {
		width: 100%;
	}

	.weui-cell__bd {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.jiantou-right {
		width: 18rpx;
		height: 32rpx;
		margin: 28rpx;
		justify-content: flex-end;
	}

	.section_gap {
		margin-top: 20rpx;
		font-size: 30rpx;
		padding: 20rpx 20rpx;
		/* border-radius: 10rpx; */
		background: #fff;
		color: #333333;
	}

	.section_title {
		margin-bottom: 15rpx;
	}

	.chooseItems {
		font-size: 26rpx;
		letter-spacing: 1px;
		line-height: 17px;


	}

	.chooseitem {
		padding: 10rpx 0 10rpx 0;
		font-size: 29rpx;
		display: -webkit-box;
		align-items: flex-start;
		width: 100%;
		box-sizing: border-box;

	}

	.complaint-name {
		margin-top: 10rpx;
		box-sizing: border-box;
		width: 90%;
	}

	.suggestview {
		margin: 24rpx 0;
		width: 100%;
		background: #FFFFFF;
		box-sizing: border-box;
	}

	.suggest-title {
		box-sizing: border-box;
		font-size: 30rpx;
		color: #333333;
		padding: 30rpx 24rpx 30rpx 24rpx;
	}

	.weui-textarea {
		margin-top: 20rpx;
		margin-left: 24rpx;
		height: 140rpx;
		font-size: 29rpx;
		background-color: #ffffff;
		outline: none;
		border-color: #f2f2f2;


	}

	.info-placeholder {
		padding: 20rpx 20rpx;
	}

	.info-item {
		background: #fff;
		margin-top: 20rpx;
		font-size: 30rpx;
		height: 80rpx;
		line-height: 80rpx;
		padding: 0 20rpx;
		display: flex;
		justify-content: space-between;
	}



	.phoneinput {
		outline: none;
		box-sizing: border-box;
		line-height: 80rpx;
		height: 80rpx;
		flex: 1;
		/* width: 100%; */
	}

	.info-placeholderPhone {
		color: #333;
		font-size: 24rpx;
	}

	.btn-shops {
		/* width: 700rpx; */
		margin-left: 30rpx;
		margin-right: 30rpx;
		box-sizing: border-box;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 8rpx;
		margin-top: 50rpx;
		margin-bottom: 100rpx;
		text-align: center;
		background: #f34930;
		color: #fff;
	}

	.picker {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.sexbg {
		background: #FFFFFF;
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
		justify-content: flex-start;
		padding-left: 30rpx;
	}
</style>
